<template>
    <div>
        <h1>我是day07</h1>
        <keep-alive>
            <MyDay07S v-if="str"/>
            <MyDay07SS v-else/>
        </keep-alive>
        <button @click="btn()">改变进入的组件</button>
        <hr>
        <!-- <button @click="func1()">点击</button> -->
        <button @click="sum()">显示/隐藏</button>
        <!-- name=""可以代替v-(样式)，设置单个动画时提供别名 -->
        <!-- <transition name="app" appear="true">
            <h1 v-show="isShow">你好</h1>
        </transition> -->
        <!-- <transition-group name="app" appear>
            <h1 v-show="isShow" key="1">你好</h1>
            <h1 v-show="isShow" key="2">我是hello woild</h1>
        </transition-group> -->
        <transition-group appear 
            name="animate__animated"
            enter-active-class="animate__flipOutX"
            leave-active-class="animate__flipOutY"
            class="animate__flipOutX"
        >
            <!-- <h1 v-show="isShow" class="animate__animated animate__bounceInDown animate__rubberBand" key="1">11111111111111</h1> -->
            <h1 v-show="isShow" key="2">22222222222222</h1>
            <h1 v-show="isShow" key="3">3333333333333</h1>

        </transition-group>
    </div>
    
</template>

<script>
import MyDay07S from './day07s.vue'
import MyDay07SS from './day07ss.vue'
import "animate.css"
export default {
    name:'MyDay07',
    data() {
        return {
            str:true,
            isShow:true
        }
    },
    components:{
        MyDay07S,
        MyDay07SS,
    },
    // this.$nextTick 用于调取接口，类似于延时器
    // this.$nextTick与setTimeout区别
    // this.$nextTick先执行
    // -----------------
    // keep-alive用于缓存组件，优化性能
    methods:{
        sum(){
            this.isShow=!this.isShow
        },
        btn(){
            this.str = !this.str;
        },
        func1(){
            setTimeout(()=>{
                console.log(4444444444);
            },0)
            console.log(111111111111);
            this.$nextTick(()=>{
                console.log(22222222);
            })
            console.log(333333333);
        }
    },
}
</script>

<style>
.h1{
    background-color: aqua;
}
.v-enter{
    animation: zht1 10s linear;
}
.app-enter-active{
    animation: zht2 1s linear;
}
.v-enter-to{
    animation: zht3 1s linear;
}
.v-leave{
    animation: zht1 0.5s linear reverse;
}
.app-leave-active{
    animation: zht2 0.5s linear reverse;
}
.v-leave-to{
    animation: zht3 0.5s linear reverse;
}
@keyframes zht1{
    0%{
        transform: translateX(0);
        color: red;
    }
    100%{
        transform: translateX(100px);
        color: red;
    }
}
@keyframes zht2{
    0%{
        transform: translateX(100px);
        color: red;

    }
    100%{
        transform: translateX(200px);
        color: orange;
    }
}
@keyframes zht3{
    0%{
        transform: translateX(200px);
        color: orange;
    }
    100%{
        transform: translateX(300px);
        color: green;
    }
}
</style>